<template>
  <div class="chatBox height_100" v-if="current_contact.id">
    <chat-header></chat-header>
    <chatContent></chatContent>
    <chatFooter v-if="current_contact.id_type !== 0"></chatFooter>
    <drawer v-if="current_contact.id_type !== 0"></drawer>
    <min-dialog-box :dialogData="kickedOutData" @confirmBtnEvent="confirmBtnEvent" v-if="ifKickedOut"></min-dialog-box>
    <min-dialog-box :dialogData="dissolutionData" @sureBtnEvent="sureBtnEvent" v-if="ifDissolution"></min-dialog-box>
  </div>
</template>

<script>
import chatHeader from './chatHeader'
import chatContent from './chatContent'
import chatFooter from './chatFooter'
import drawer from './drawer'

export default {
  data () {
    return {
      footerHeight: +'',
      // 被踢出群聊data
      kickedOutData: {
        mainTips: [
          '群主已将您移出会议'
        ],
        btnList: [
          {
            name: '知道了',
            color: 'blue',
            type: 'confirm'
          }
        ]
      },
      // 是否显示被踢出群聊
      ifKickedOut: false,
      // 群聊解散的data
      dissolutionData: {
        mainTips: [
          '群主已解散该群'
        ],
        btnList: [
          {
            name: '知道了',
            color: 'blue',
            type: 'sure'
          }
        ]
      },
      // 是否显示解散群聊
      ifDissolution: false
    }
  },
  computed: {
    // 当前联系人
    current_contact () {
      return this.$store.state.chatInformation.current_contact
    },
    // 联系人列表
    chatInformation () {
      return this.$store.state.chatInformation.chatInformation
    }
  },
  watch: {
    chatInformation: {
      deep: true,
      immediate: true,
      handler (val) {
        val.forEach(item => {
          if (item.id === this.current_contact.id && item.id_type === this.current_contact.id_type) {
            this.ifKickedOut = item.ifKickedOut
            this.ifDissolution = item.ifDissolution
          }
        })
      }
    }
  },
  components: {
    chatHeader,
    chatContent,
    chatFooter,
    drawer
  },
  methods: {
    // 被踢出群聊的知晓事件
    confirmBtnEvent () {
      this.$store.commit('chatInformation/remove_contact', {
        id: this.current_contact.id,
        idType: this.current_contact.id_type
      })
      this.$store.commit('chatInformation/set_current_contact', {})
      this.ifKickedOut = false
    },
    // 解散群聊的知晓事件
    sureBtnEvent () {
      this.$store.commit('chatInformation/remove_contact', {
        id: this.current_contact.id,
        idType: this.current_contact.id_type
      })
      this.$store.commit('chatInformation/set_current_contact', {})
      this.ifDissolution = false
    }
  },
  created () {
    this.$store.commit('message/set_ifShowChatDetail', false)
  }
}
</script>

<style scoped lang="scss">
  .chatBox{
    position: relative;
    width: calc(100% - 300px);
    background-color: #f6f7fb;
    // position: relative;
    min-width: 500PX;
  }
</style>
